<template>
  <div class="DetailsCustomerTrajectory">
    <div class="noData" v-if="page.total == 0">暂无数据</div>
    <div class="TimelineHeight">
      <div v-for="(item, index) in recordValAll" :key="index">
        <Divider orientation="left" class="item_date">{{ item.date }}</Divider>
        <Timeline>
          <template v-for="(itemK, index) in item.customerDynamicDTOS" :key="index">
            <TimelineItem>
              <div class="time_line_title">
                <!-- <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span> -->
                <span>{{ itemK.time }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">
                {{ itemK.content }}
                <span class="perBox" v-if="itemK.logType == 9" @click="searchPermission(itemK)">
                  查看权限
                </span>
              </div>
            </TimelineItem>
          </template>
        </Timeline>
      </div>
    </div>
    <permission-tree ref="permissionTreeRef"></permission-tree>
    <dt-page :page="page" @change="onPageChange" />
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import dt from '@dt/dt'
  import permissionTree from './permissionTree.vue'
  import { editOpt, refuelingOpt } from '../biz/proSureOpt'
  import apiMgr from '../biz/index.js'
  import router from '@/router'
  const page = ref({ rows: 50, total: 0, page: 1 })
  function onPageChange(val) {
    tenantRecord()
  }
  const permissionTreeRef = ref()

  const searchPermission = (val) => {
    permissionTreeRef.value.show(val.contentId, val.contentName)
  }

  const recordValAll = ref()
  function getformatData(sortData) {
    const groups = {}
    sortData.forEach((o) => {
      const group = JSON.stringify(o.date)
      groups[group] = groups[group] || []
      groups[group].push(o)
    })
    return Object.keys(groups).map((group) => {
      return {
        customerDynamicDTOS: groups[group],
        date: groups[group][0].date
      }
    })
  }
  const proId = ref()
  function show(val) {
    proId.value = val
    tenantRecord()

    // let timer = null
    // this.$nextTick(function () {
    //   timer = setInterval(() => {
    //     if (proId.value) {
    //       clearInterval(timer)
    //       timer = null
    //       tenantRecord()
    //     }
    //   }, 1)
    // })
  }
  const tenantRecord = () => {
    console.log(proId.value, 'proId.value')
    const params = {
      tenantId: proId.value,
      page: page.value.page,
      rows: page.value.rows
    }
    apiMgr.tenantChangeLogForWeb(params).then((res) => {
      page.value.total = res.total
      recordValAll.value = getformatData(res.list)
    })
    // const res =  apiMgr.tenantChangeLogForWeb(params)
    // page.value.total = res.total
    // recordValAll.value = getformatData(res.list)

    // console.log(recordValAll.value, 'ddddd')
  }
  defineExpose({ show })
</script>

<style lang="scss" scoped>
  .DetailsCustomerTrajectory {
    margin-top: 16px;
    .TimelineHeight {
      height: 65vh;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .ivu-timeline-item-content {
      padding-bottom: 0;
    }

    p {
      margin-bottom: 4px;

      span:nth-child(1) {
        display: inline-block;
        width: 300px;
      }
    }

    .time_line_title {
      color: #194fe8;
      margin-bottom: 20px;
      font-size: 15px;

      span:nth-child(1) {
        display: inline-block;
        width: 200px;
        margin-right: 20px;
      }
    }

    .time_line_content {
      font-size: 15px;
    }

    .item_date {
      font-size: 20px;
    }
  }

  .noData {
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding: 50px 0;
  }

  .audioPlay {
    margin-left: 20px;
    cursor: pointer;
  }

  .perBox {
    font-size: 14px;
    color: #194fe8;
    cursor: pointer;
    margin-left: 20px;
  }
</style>
